<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap {
        width: 200px;
        height: 200px;
        margin: 300px auto;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(0deg) rotateY(0deg);
    }

    .box {
        width: 200px;
        height: 200px;
        font-size: 50px;
        font-weight: 700;
        /* 字体在块元素中水平垂直居中 */
        text-align: center;
        line-height: 200px;
        /* 使用定位让盒子罗列在一起 */
        position: absolute;
        left: 0;
        top: 0;
    }

    .box1 {
        background-color: red;
        /* 不平移直接旋转 */
        /* 暂定不动 */
        transform: rotateY(180deg);
    }

    .box2 {
        background-color: orange;
        /* 以上面的边为基点旋转   先改变基点再进行旋转*/
        transform-origin: top;
        transform: rotateX(90deg);

    }

    .box3 {
        background-color: yellow;
        transform-origin: right;
        transform: rotateY(90deg);
    }

    .box4 {
        background-color: green;
        transform-origin: bottom;
        transform: rotateX(-90deg);
    }

    .box5 {
        background-color: blue;
        transform-origin: left;
        transform: rotateY(-90deg);
    }

    .box6 {
        background-color: purple;
        transform: translateZ(200px);
    }
</style>

<body>
    <!-- 先去分析 再去写 -->
    <div class="wrap">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</body>

</html>